<template>
    <el-header>
        <strong>欢迎来到VueAdmin管理系统</strong>

        <div class="header-avatar">
            <el-avatar size="medium" :src="userinfo.avatar">
            </el-avatar>
            <!-- <el-avatar size="medium" src="http://localhost:8080/img/erweima.b2246178.jpg">
            </el-avatar> -->

            <el-dropdown>
                <span class="el-dropdown-link">
                    {{userinfo.username}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link to="/home/usercenter">
                            个人中心 
                        </router-link>
                       </el-dropdown-item>
                    <el-dropdown-item ><span @click="logaout">退出</span></el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>
            <el-link href="http://182.61.48.149/" taeget="_blank">个人网站</el-link>
            <el-link href="https://blog.csdn.net/JueNuan" taeget="_blank">CSDN个人网站</el-link>
        </div>
    </el-header>
</template>
<script>
export default {
    data() {
        return {
            userinfo: {
                id: "",
                username: "",
                avatar: "",

            }
        }
    },
    created() {
        this.getUserinfo()
    },
    methods: {
        getUserinfo() {
            this.$axios.get("/sys/userinfo").then(data => {
                // console.log(1111, data.data.data)
                this.userinfo = data.data.data
            })
        },
        logaout(){
            console.log(111)
            this.$axios.post("/logout").then(data=>{
                console.log(data)
                localStorage.clear()
                sessionStorage.clear()
                this.$store.commit("resetState")
                this.$router.push("/login")
            })
        }

    },
}
</script>

<style  scoped>
.el-header {
    background-color: #17b3a3;
    color: #333;
    text-align: center;
    line-height: 60px;
    width: 100%;
}

.header-avatar {
    float: right;
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>